import React from "react";
import { useTranslation } from "react-i18next";

interface ConfirmProps {
  message: string;
  isSubmitting?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export const Confirm: React.FC<ConfirmProps> = (props: ConfirmProps) => {
  const { t } = useTranslation();
  return (
    <dialog id="dialog_confirm" className="modal modal-open">
      <div className="modal-box">
        <span>{props.message}</span>
        <div className="modal-action">
          <button className={`btn btn-primary ${props.isSubmitting ? "btn-disabled" : ""}`} onClick={props.onConfirm} value="delete" >
            {props.isSubmitting ? <span className="loading loading-spinner"></span> : ""}
            {t("confirm")}
          </button>
          <button className="btn" onClick={props.onCancel}>{t("cancel")}</button>
        </div>
      </div>
    </dialog>
  );
}